<template>
	<view class="y">
		<view class="x">
			<view class="aa">
				<view class="x" style="margin-top: 16px;">
					<image src="../../static/定位.png" style="width: 20px; height: 20px; margin-left: 15px;"></image>
					<label style="margin-left: 5px;">北海市</label>
					<image src="../../static/箭头.png"
						style="width: 15px; height: 10px; margin-left: 5px;margin-top: 3px;"></image>

					<image src="../../static/扫一扫.png" style="width: 25px; height: 25px;margin-left: 185px;"></image>

				</view>

				<view style="padding: 6px 16px; background-color:#aaaaff;margin-top: 4px;">
					<view @click="dian">
					<uni-easyinput placeholder="点击前往搜索" prefixIcon="search" ></uni-easyinput>
					</view>
				</view>

				<!-- 轮播图 -->
				<!-- :autoplay 是自动放映，1是参数 -->
				<swiper :autoplay="1">
					<swiper-item>
						<image style="height: 200px;width: 750rpx; margin-top: 5px;" src=" ../../static/首页红包.png">
						</image>
					</swiper-item>
					<swiper-item>
						<image style="height: 200px;width: 750rpx;  margin-top: 5px;" src="../../static/轮播图2.jpg">
						</image>
					</swiper-item>
					<swiper-item>
						<image style="height: 200px;width: 750rpx;  margin-top: 5px;" src="../../static/轮播图3.jpg">
						</image>
					</swiper-item>
				</swiper>


				<label class="x" style="height: 30px; align-items: center;display: flex;justify-content: space-between;"
					@click="dianji">

					<image class="tp" src="../../static/配送1.png"></image>
					<label class="zt">免费配送</label>
					<image class="tp" src="../../static/快递.png"></image>
					<label class="zt">晚到必赔</label>
					<image class="tp" src="../../static/专业服务.png"></image>
					<label class="zt">专业检测</label>
					<image class="tp" src="../../static/时间.png"></image>
					<label class="zt">30分钟达</label>

				</label>
			</view>
		</view>

		<!-- 图标 -->
		<view style="margin-top: 115px;" @click="dianji">
			<label class="x" style="flex-wrap: wrap;">
				<view class="y" style="width: 150rpx;align-items: center;">
					<image
						src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/0f0351d58aee426a8efb6478409765d3.png"
						class="l"></image>
					<view class="z">今日推荐</view>
				</view>
				<view class="y" style="width: 150rpx;align-items: center;">
					<image
						src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/1bf57ee9c8c44ab6b015c32d2af232c7.png"
						class="l"></image>
					<view class="z">时尚短袖</view>
				</view>
				<view class="y" style="width: 150rpx;align-items: center;">
					<image
						src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/73cfd3c3600843f99cd703f16213a3ea.png"
						class="l"></image>
					<view class="z">今日爆火</view>
				</view>
				<view class="y" style="width: 150rpx;align-items: center;">
					<image
						src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/58ffadc41d7048b29ba7f909287c6359.png"
						class="l"></image>
					<view class="z">今日必买</view>
				</view>
				<view class="y" style="width: 150rpx;align-items: center;">
					<image
						src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/b68b93dcdd33406385f7cf3ab7b95b5b.png"
						class="l"></image>
					<view class="z">邀请有礼</view>
				</view>
				<view class="y" style="width: 150rpx;align-items: center;margin: auto;">
					<image
						src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/ca32f789cc884ee99ca882257db5e89d.png"
						class="l"></image>
					<view class="z">懒人菜单</view>
				</view>
				<view class="y" style="width: 150rpx;align-items: center;">
					<image
						src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/792f2ecff583479784ba903e7f3c8720.png"
						class="l"></image>
					<view class="z">疯狂折扣</view>
				</view>
				<view class="y" style="width: 150rpx;align-items: center;">
					<image
						src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/db1ed3ffefb74fd380dcf567ce0d64fa.png"
						class="l"></image>
					<view class="z">团购商品</view>
				</view>
				<view class="y" style="width: 150rpx;align-items: center;">
					<image
						src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/f0b6c7f4f17c4924a7cb6b1145b98a4e.png"
						class="l"></image>
					<view class="z">掌柜推荐</view>
				</view>
				<view class="y" style="width: 150rpx;align-items: center;">
					<image
						src="https://freshmall2021.oss-cn-beijing.aliyuncs.com/bg/44389bbbf30745a382d63a9fa70f548f.png"
						class="l"></image>
					<view class="z">精品推荐</view>
				</view>
			</label>
		</view>


		<view style="background-color: #ededed;">
			<!-- 广播 -->
			<view class="x"
				style="background-color: #ffffff;width: 750rpx; height: 50rpx; margin-top: 10px; align-items:">
				<image src="../../static/广播.png" style="width: 40rpx; height: 40rpx;margin-left: 15px;"></image>
				<view class="text">
					新鲜水果
				</view>
			</view>

			<!-- 今日特价红包图片 -->
			<view>
				<image src="../../static/今日特价.png" style="width:330px; height: 50px;padding: 15px;"></image>
			</view>


			<!-- 商品 -->
			<view class="x">
				<view style="margin-left: 5px;" @click="dianji">
					<view class="y" style="background-color: #f8f8f8;width: 150px; height: 200px;">
						<image class="shang" src="../../static/1.jpg"></image>
						<label class="duan">短袖</label>
						<view class="x">
							<label class="qian">￥2</label>
							<label class="jian">件/份</label>
							<image class="jia" src="../../static/购物车.png"></image>
						</view>
					</view>
				</view>

				<view style="margin-left: 5px;" @click="dianji">
					<view class="y" style="background-color: #f8f8f8;width: 150px; height: 200px;">
						<image class="shang" src="../../static/1.jpg"></image>
						<label class="duan">短袖</label>
						<view class="x">
							<label class="qian">￥2</label>
							<label class="jian">件/份</label>
							<image class="jia" src="../../static/购物车.png"></image>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {}
		},
		methods: {
			dian(){
				uni.navigateTo({
					url:'/pages/shouye/shousuo'
				})
			},
			dianji() {
				uni.navigateTo({
					url: '../xiangqing/xiangqing'
				})
			}
		}
	}
</script>

<style>
	.x {
		display: flex;
		/* 打开弹性布局 */
		flex-direction: row;
		/* 横 */

	}

	.y {
		display: flex;
		/* 打开弹性布局 */
		flex-direction: column;
		/* 竖 */
	}

	.aa {
		background-color: #aaaaff;
		width: 440px;
		height: 155px;
	}

	.l {
		width: 45px;
		height: 40px;
		margin-top: 4px;
		/* 上边距 */

	}

	.z {
		color: #bdbdbd;
		font-size: 10px;
		margin-top: 3px;
		margin-bottom: 3px;
	}

	.text {
		margin-top: 5px;
		animation: 10s wordsLoop linear infinite normal;
		/* 表示滚动的时长 */
		padding-bottom: 5px;
	}

	@keyframes wordsLoop {
		0% {
			transform: translateX(300px);
			-webkit-transform: translateX(300px);
		}

		100% {
			transform: translateX(-150%);
			-webkit-transform: translateX(-150%);
		}
	}

	/* 横向的小图标 */
	.tp {
		width: 20px;
		height: 20px;
		margin-left: 10px;
	}

	.zt {
		color: #a2a2a2;
		font-size: 10px;
		margin-right: 6px;
	}

	/* 商品区 */
	.shang {
		padding-top: 8px;
		margin: 0 auto;
		/* 居中 */
		/* align-items: center; */
		/* 垂直居中 */
		width: 130px;
		height: 130px;
	}

	.jia {
		margin-top: 5px;
		margin-left: 13px;
		/* text-align: right; */
		/* 靠右 */
		width: 30px;
		height: 30px;
		background-color: aquamarine;
		border-radius: 50%;
	}

	.duan {
		font-size: 13px;
		margin-left: 10px;
		margin-top: 5px;
	}

	.qian {
		color: #ff0000;
		font-size: 13px;
		margin-left: 8px;
		margin-top: 13px;
	}

	.jian {
		color: #bdbdbd;
		font-size: 10px;
		margin-left: 40px;
		margin-top: 18px;
	}
</style>